<template>
  <div class="common-layout">
    <my-header></my-header>
    <my-menu ref="myMenu"></my-menu>
    <my-search></my-search>
    <div class="content">
      <div class="c1">
        <div class="c1_left">
          <ul id="c_margin_bottom1" class="_top" style="background: #700001">
            <li class="_left" style="background: white;margin-left: 12px">新法速递</li>
            <li class="c-more" onclick="goToList(this)" style="color: white">更多</li>
            <li class="_icon " onclick="goToList(this)"><i class="el-icon-more" style="color: white"/></li>
          </ul>
          <my-index-helper-one></my-index-helper-one>
        </div>
        <div class="c1_right">
          <ul id="c_margin_bottom2" class="_top">
            <li class="_left">宪法</li>
            <li :class="{ 'nav-click' : navName = 'index1' }" class="c-more" @click="goToList('/list?name=index1')">
              更多
            </li>
            <li :class="{ 'nav-click' : navName = 'index1' }" class="_icon" @click="goToList('/list?name=index1')"><i
              class="el-icon-more"/></li>
          </ul>
          <my-index-helper-one></my-index-helper-one>
        </div>
      </div>
      <div class="c2">
        <ul id="c_margin_bottom3" class="_top">
          <li class="_left">法律</li>
          <li style="float: left">
            <ul>
              <li id="c-table-select-one" class="c-table-select">法律</li>
              <li class="c-table-select">法律解析</li>
              <li class="c-table-select">有关法律问题和重大问题的决定（部分）</li>
              <li class="c-table-select">修改、废止的决定</li>
            </ul>
          </li>
          <li :class="{ 'nav-click' : navName = 'index2' }" class="c-more" @click="goToList('/list?name=index2')">更多
          </li>
          <li :class="{ 'nav-click' : navName = 'index2' }" class="_icon" @click="goToList('/list?name=index2')"><i
            class="el-icon-more"/></li>
        </ul>
        <ul class="c2_second_li">
          <li id="c2-second-li-one" class="c-table-select-second">全部</li>
          <li class="c-table-select-second">宪法相关</li>
          <li class="c-table-select-second">民法商法</li>
          <li class="c-table-select-second">行政法</li>
          <li class="c-table-select-second">经济法</li>
          <li class="c-table-select-second">社会法</li>
          <li class="c-table-select-second">刑法</li>
          <li class="c-table-select-second">诉讼与非诉讼程序法</li>
        </ul>
        <my-index-helper-two style="float: left"></my-index-helper-two>
        <my-index-helper-two style="float:right;"></my-index-helper-two>
      </div>
      <div class="c1">
        <div class="c1_left">
          <ul id="c_margin_bottom4" class="_top">
            <li class="_left">行政法规</li>
            <li :class="{ 'nav-click' : navName = 'index3' }" class="c-more" @click="goToList('/list?name=index3')">
              更多
            </li>
            <li :class="{ 'nav-click' : navName = 'index3' }" class="_icon" @click="goToList('/list?name=index3')"><i
              class="el-icon-more"/></li>
          </ul>
          <my-index-helper-one></my-index-helper-one>
        </div>
        <div class="c1_right">
          <ul id="c_margin_bottom5" class="_top">
            <li class="_left">司法解释</li>
            <li style="float: left">
              <ul>
                <li id="c1_right-table-select" class="c-table-select">高法司法解析</li>
                <li class="c-table-select">高检司法解析</li>
                <li class="c-table-select">联合发布司法解析</li>
              </ul>
            </li>
            <li :class="{ 'nav-click' : navName = 'index5' }" class="c-more" @click="goToList('/list?name=index5')">
              更多
            </li>
            <li :class="{ 'nav-click' : navName = 'index5' }" class="_icon" @click="goToList('/list?name=index5')"><i
              class="el-icon-more"/></li>
          </ul>
          <my-index-helper-one></my-index-helper-one>
        </div>
      </div>
      <div class="c2">
        <ul class="_top">
          <li class="_left">地方性法规</li>
          <li :class="{ 'nav-click' : navName = 'index4' }" class="c-more" @click="goToList('/list?name=index4')">更多
          </li>
          <li :class="{ 'nav-click' : navName = 'index4' }" class="_icon" @click="goToList('/list?name=index4')"><i
            class="el-icon-more"/></li>
        </ul>
        <ul class="c2-tab2">
          <li class="c2-tab2-li-one">全部</li>
          <li>北京</li>
          <li>天津</li>
          <li>河北</li>
          <li>山西</li>
          <li>内蒙古</li>
          <li>辽宁</li>
          <li>吉林</li>
          <li>黑龙江</li>
          <li>上海</li>
          <li>江苏</li>
          <li>浙江</li>
          <li>安徽</li>
          <li>福建</li>
          <li>江西</li>
          <li>山东</li>
          <li>河南</li>
          <li>湖北</li>
          <li>湖南</li>
          <li>广东</li>
          <li>广西</li>
          <li>海南</li>
          <li>重庆</li>
          <li>四川</li>
          <li>贵州</li>
          <li>云南</li>
          <li>西藏</li>
          <li>陕西</li>
          <li>甘肃</li>
          <li>青海</li>
          <li>宁夏</li>
          <li>新疆</li>
        </ul>

        <my-index-helper-two style="float:right;"></my-index-helper-two>
        <my-index-helper-two style="float: left"></my-index-helper-two>
      </div>
    </div>
    <my-footer></my-footer>
  </div>
</template>

<script>
import myMenu from '../components/menu'
import myHeader from '../components/header'
import myFooter from '../components/footer'
import mySearch from '../components/search'
import myIndexHelperOne from '../components/helper/indexHelperOne'
import myIndexHelperTwo from '../components/helper/indexHelperTwo'
import api from '../apis/api'

export default {
  data () {
    return {}
  },

  components: {
    myMenu,
    myHeader,
    myFooter,
    mySearch,
    myIndexHelperOne,
    myIndexHelperTwo
  },
  methods: {
    initNav () {
      this.$refs.myMenu.changeNav()
    },
    goToList (url) {
      this.$router.push(url)
    },
    getLaw () {
      const that = this
      const type = 'aaa'
      api.lawDetail.getLaw(type, function (res) {
        console.log('res', res)
        if (res.data.code === 0) {
          that.dateLists = res.data.data
        }
      }, true)
    }
  },
  mounted: function () {
    this.initNav()
    this.getLaw()
  },
  watch: {
    $route () {
      this.initNav()
    }
  }
}
</script>

<style scoped>

.content {
  width: 1200px;
  margin: 20px auto;
}

.c1 {
  margin-top: 20px;
  float: top;
  overflow: hidden;
}

.c1_left {
  float: left;
}

.c1_left, .c1_right {
  border: 1px solid #b30000;
  width: 588px;
  height: 322px;
  border-radius: 10px;
}

.c1_right {
  float: right;
}

#c_margin_bottom1, #c_margin_bottom2, #c_margin_bottom3, #c_margin_bottom4, #c_margin_bottom5 {
  margin-bottom: 15px;
}

.c2 {
  margin-top: 20px;
  height: 322px;
  border: 1px solid #b30000;
  border-radius: 10px;
}

._top {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  height: 48px;
  line-height: 48px;
}

._left {
  padding: 0 26px;
  float: left;
  font-weight: bold;
}

._left, .c-more {
  color: #6f0703;
  font-size: 16px;
}

.c-more {
  cursor: pointer;
  float: right;
  margin-right: 20px;
}

._icon {
  float: right;
  margin-right: 10px;
  cursor: pointer;
}

.c-table-select, .c-table-select-second {
  font-size: 16px;
  float: left;
  margin: auto 6px;
  line-height: 44px;
  cursor: pointer;
}

.c-table-select {
  color: dimgray;
  font-weight: bold;
}

#c-table-select-one {
  color: #700001;
  border-bottom: 2px solid #700001;
}

#c1_right-table-select {
  color: #700001;
  border-bottom: 2px solid #700001;
}

.c-table-select-second {
  color: #141414;
  font-size: 16px;
  margin: auto 20px;
}

.c2_second_li {
  margin: auto 20px;
  height: 25px;
}

#c2-second-li-one {
  background: #700001;
  border-radius: 10px;
  color: white;
  cursor: pointer;
  padding: 0 5px;
}

.c2-tab2 {
  margin: auto 20px;
}

.c2-tab2 > li {
  float: left;
  margin: 8px 15px;
}

.c2-tab2-li-one {
  background: #700001;
  border-radius: 10px;
  color: white;
  cursor: pointer;
  padding: 5px;
}

/*鼠标悬停时的样式*/
.c-table-select-second:hover {
  background: #700001;
  border-radius: 10px;
  color: white;
}

.c2-tab2 > li:hover {
  background: #700001;
  border-radius: 10px;
  color: white;
  cursor: pointer;
}

.c-table-select:hover {
  color: #700001;
  border-bottom: 2px solid #700001;
}

</style>
